<template>
  <el-dialog  :title="item.billNo +'批次详情'" v-model="dialog.openCheck"  width="900"    append-to-body @close="closeTxDialog">
    <div>
        <el-row>
          <el-col :span="8" style="padding: 8px;">
              <span>创建时间：</span>{{item.addTime}}
          </el-col>
          <el-col :span="9" style="padding: 8px;">
              <span>交易流水号：</span>{{item.busNo}}
          </el-col>
          <el-col :span="7" style="padding: 8px;">
              <span>请求银行流水号：</span>
          </el-col>
          <el-col :span="8" style="padding: 8px;">
              <span>企业名称：</span>{{item.merName}}
          </el-col>
          <el-col :span="9" style="padding: 8px;">
              <span>企业编号：</span>{{item.merNo}}
          </el-col>
          <el-col :span="7" style="padding: 8px;">
              <span>服务商名称：</span>{{item.sydName}}
          </el-col>
          <el-col :span="8" style="padding: 8px;">
              <span>服务商编号：</span>{{item.sydNo}}
          </el-col>
          <el-col :span="9" style="padding: 8px;">
              <span>收款人：</span>{{item.workerName}}
          </el-col>
          <el-col :span="7" style="padding: 8px;">
              <span>收款人身份证号：</span>{{item.cardId}}
          </el-col>
          <el-col :span="8" style="padding: 8px;">
              <span>收款人手机号：</span>{{item.workerPhone}}
          </el-col>
          <el-col :span="9" style="padding: 8px;">
              <span>收款人卡号：</span>{{item.bankCard}}
          </el-col>
          <el-col :span="7" style="padding: 8px;">
              <span>打款金额：</span>{{proxy?.convertFenToYuan(item.amount)}}
          </el-col>
          <el-col :span="8" style="padding: 8px;">
              <span>服务费：</span>{{proxy?.convertFenToYuan(item.serviceChargeMoney)}}
          </el-col>
          <el-col :span="9" style="padding: 8px;">
              <span>打款状态：</span>{{getPayStatusStr(item.payStatus)}}
          </el-col>
          <el-col :span="7" style="padding: 8px;">
              <span>银行附言：</span>{{item.billRemark}}
          </el-col>
        </el-row>
    </div>
    <template #footer>
          <div class="dialog-footer">
            <el-button @click="closeTxDialog">取 消</el-button>
          </div>
        </template>

    </el-dialog>
</template>

<script  setup name="payDetailDialog" lang="ts">
  const pros = defineProps(['title','openCheck','id','txItem']);
  const emit = defineEmits(['dialogClose', 'dialogSubmit','flushDetail'])
  const { proxy } = getCurrentInstance() as ComponentInternalInstance;
  const { pay_status } = toRefs<any>(proxy?.useDict('pay_status'));
  const dialog = ref({
     title:'',
     openCheck:false
  })
  const loading = ref(false)
  const item = ref({});
  const dialogRef  = ref();
  item.value = pros.txItem;

  const getPayStatusStr = (payStatus)=>{

    let len = pay_status.value.length;
    for(let i = 0; i< len ; i++){
        if(payStatus ==  pay_status.value[i].value){
          return pay_status.value[i].label;
        }
    }
  }

  const closeTxDialog =()=>{
      dialog.value.openCheck = false;
      emit('dialogClose',{tag:1});

 }

  watch(() => pros.openCheck, async val => {
         dialog.value.openCheck =  val;
    });


  watch(() => pros.txItem, async val => {
      item.value = pros.txItem;
    });

</script>

<style>

  .el-dialog__header{
    border-bottom: 1px solid #e8e8e8;
    padding-bottom:15px;
    margin-right:0;
  }

  .el-dialog__footer{
     border-top: 1px solid #e8e8e8;
  }


  .tx-tips{
      background: #f5f5f5;
      padding: 15px;
      display: flex;
      justify-self: flex-start;
      align-items: center;
  }

  .tx-tips img{
    width: 30px;
    height:30px;
  }

  .content{
        border: 1px solid #1890ff;
        margin-top: 30px;
  }

  .content-title{
        border-bottom: 1px solid #1890ff;
        padding: 15px 0;
        text-align: center;
        font-size: 20px;
        font-weight: 700;
  }


  .el-row:after, .el-row:before {
      display: table;
      content: "";
  }

</style>
